import echarts from 'echarts';
require('echarts/dist/extension/dataTool.js');

class DemoCharts {
  constructor() {
    this.titleTextStyle = {
      // 标题样式配置
      color: '#E6E6E6',
      fontweight: '500',
      fontFamily: 'Microsoft YaHei',
      fontSize: '12'
    };
    this.titlePos = 'center'; // 标题的位置
    this.axisFontFamily = 'SourceHanSansCN Regular'; // 坐标轴文字的字体
    this.axisFontSize = '18'; // 坐标轴字体的大小
    this.axisColor = '#a4c5f0';
  }
  /**
   *
   * @param {String} xType x轴的类型
   * @param {String} yType y轴的类型
   * @param {String} xName x轴名称
   * @param {String} yName y轴名称
   * @param {Array} xData  x轴数据，当x轴是类目轴时有效
   * @param {Array} yData  与y轴数据，当y轴是类目轴时有效
   * @param {Number} xInterval x轴是否全部显示，当值为0时x轴全部显示
   * @param {Number} yInterval y轴是否全部显示，当值为0时y轴全部显示
   * @param {Number} xMax      x轴最大值，当x轴时数据轴时有效
   * @param {Number} yMax      y轴最大值，当y轴时数据轴时有效
   * @param {Number} xMin      x轴最小值，当x轴时数据轴时有效
   * @param {Number} yMin      y轴最小值，当y轴时数据轴时有效
   * @param {Boolean} boundaryGap 折线图是否顶格显示，为false时顶格显示
   * @return {Object}      折线图或者直方图关于x、y轴的基本配置对象
   */

  //24H考核指标趋势
  demo_charts({ data, dom }) {
    var chart = echarts.getInstanceByDom(document.querySelector(dom));
    if (!chart) {
      chart = echarts.init(document.querySelector(dom));
    }
    let option = {
      legend: [
        {
          icon: 'rect',
          textStyle: {
            fontFamily: this.axisFontFamily,
            fontSize: '14',
            color: this.axisColor
          },
          x: '400px',
          y: '8px',
          data: ['ETC交易平均成功率']
        },
        {
          icon: 'rect',
          textStyle: {
            fontFamily: this.axisFontFamily,
            fontSize: '14',
            color: this.axisColor
          },
          x: '400px',
          y: '60px',
          data: ['ETC车辆信息获取平均成功率']
        },
        {
          icon: 'rect',
          textStyle: {
            fontFamily: this.axisFontFamily,
            fontSize: '14',
            color: this.axisColor
          },
          x: '400px',
          y: '110px',
          data: ['车辆识别平均准确率']
        },
        {
          icon: 'rect',
          textStyle: {
            fontFamily: this.axisFontFamily,
            fontSize: '14',
            color: this.axisColor
          },
          x: '400px',
          y: '165px',
          data: ['CPC卡计费平均成功率']
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      grid: {
        left: '8%',
        right: '39%',
        bottom: '13%',
        top: '10%'
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: [],
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#1d2330']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#122754', // 颜色
              width: 1 // 粗细
            }
          },
          axisLabel: {
            textStyle: {
              fontFamily: this.axisFontFamily,
              fontSize: this.axisFontSize,
              color: this.axisColor
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          // splitNumber: 3,
          max: 100,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#122754', // 颜色
              width: 1 // 粗细
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#122754', // 颜色
              width: 1 // 粗细
            }
          },
          axisLabel: {
            formatter: '{value}%',
            textStyle: {
              fontFamily: this.axisFontFamily,
              fontSize: axisFontSize,
              color: this.axisColor
            }
          }
        }
      ],
      series: [
        {
          name: 'ETC交易平均成功率',
          type: 'line',
          symbol: 'none',
          smooth: false,
          seriesLayoutBy: 'row',
          itemStyle: {
            normal: {
              color: '#1f83a3',
              opacity: 1,
              label: {
                show: false
              },
              borderColor: '#1f83a3',
              lineStyle: {
                width: 2,
                type: 'solid'
              }
            }
          },
          data: etcSucRate
        },
        {
          name: 'ETC车辆信息获取平均成功率',
          type: 'line',
          symbol: 'none',
          smooth: false,
          seriesLayoutBy: 'row',
          itemStyle: {
            normal: {
              color: '#1ca561',
              opacity: 1,
              label: {
                show: false
              },
              borderColor: '#1ca561',
              lineStyle: {
                width: 2,
                type: 'solid'
              }
            }
          },
          data: ectAvgSucRate
        },
        {
          name: '车辆识别平均准确率',
          type: 'line',
          symbol: 'none',
          smooth: false,
          seriesLayoutBy: 'row',
          itemStyle: {
            normal: {
              color: '#205aa3',
              opacity: 1,
              label: {
                show: false
              },
              borderColor: '#205aa3',
              lineStyle: {
                width: 2,
                type: 'solid'
              }
            }
          },
          data: vehicleAvgRecRate
        },
        {
          name: 'CPC卡计费平均成功率',
          type: 'line',
          symbol: 'none',
          smooth: false,
          seriesLayoutBy: 'row',
          itemStyle: {
            normal: {
              color: '#a38d1d',
              opacity: 1,
              label: {
                show: false
              },
              borderColor: '#a38d1d',
              lineStyle: {
                width: 2,
                type: 'solid'
              }
            }
          },
          data: cpcSucRate
        }
      ]
    };
    chart.clear();
    chart.setOption(option, true);
    return chart;
  }
}

export default new DemoCharts();
